<template>
  <div class="app-main">
    <div class="app-container">
      <!-- 树形结构 -->
      <!-- 点箭头图标的时候才会展开或者收缩节点  默认展开所有节点 -->
      <el-tree :data="dataList" :props="defaultProps" :expand-on-click-node="false" default-expand-all>
        <!-- 插槽 放结构样式 -->
        <template v-slot="{data}">
          <el-row style="width: 100%;">
            <el-col :span="20"><div>{{ data.name }}</div></el-col>
            <el-col :span="4">
              <div class="spans">
                <!-- 管理员 -->
                <span>{{ data.managerName }}</span>
                <!-- 操作 (此处有三个下拉框 需要用到下拉组件)-->
                <span>
                  <!-- 因为添加子部门是基于当前部门，所以需要记录当前是在哪个部门添加的 -->
                  <el-dropdown @command="handleCommand($event,data.id)">
                    <span class="el-dropdown-link">
                      操作<i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                      <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                      <el-dropdown-item command="del">删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>

                </span>
              </div>
            </el-col>
          </el-row>
        </template>

      </el-tree>
    </div>
    <addDept
      :show-dialog.sync="showDialog"
      :res-list="resList"
      :current-node-id="currentNodeId"
      :id-edit.sync="idEdit"
      @add-success="getCompany"
    />
  </div>
</template>

<script>
import { getCompanyRequest, deleteCompanyRequest } from '@/api/department'
// 导入递归
import { dataRecursion } from '@/utils/index'
// 导入子组件
import addDept from '@/views/department/components/addDept.vue'
export default {
  name: 'Department',
  // 注册局部组件
  components: {
    addDept
  },
  data() {
    return {
      // 声明一个变量,用于判断用户点击的是编辑按钮 还是删除按钮 这个和控制开关有点类似 如果为false代表新增 ture代表的是编辑
      idEdit: false,
      // 声明一个数组作为树形数据渲染页面
      dataList: [],
      // 声明一个数组 用于父传子 表单验证
      resList: [],
      // 声明一个变量 控制弹框开关 默认是关闭状态
      showDialog: false,
      // 声明一个变量 用于储存id 后面发送ajax需要使用
      currentNodeId: '',
      /* data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }], */
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  // 调用 获取-部门列表 axios
  created() {
    this.getCompany()
  },
  methods: {
    // 发送  获取-部门列表 axios
    async getCompany() {
      const res = await getCompanyRequest()
      // console.log(res)
      // 把响应回来的数据赋值给我们定义的新数组 用于渲染页面
      // 此时我们发现页面上全部都是铺平的数据 ,我们需要把铺平数据转化为树形数组,我们使用递归的方式进行处理
      this.resList = res
      // 调用递归函数
      this.dataList = dataRecursion(res, 0)
    },
    // 注册点击事件 add添加子部门/edit编辑部门/del删除
    handleCommand(item, id) {
      // 用一个变量储存id 便于后面发送ajax
      this.currentNodeId = id
      // 条件判断 若点击的是add添加子部门 则弹窗出现
      if (item === 'add') {
        // 弹框开启
        this.showDialog = true
        // 修改弹框上面的文字新增
        this.idEdit = false
      } else if (item === 'del') {
        // 发送删除的ajax
        // 引用一个element组件  MessageBox 弹框
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          // 发送ajax请求 删除数据
          await deleteCompanyRequest(id)
          // 调用函数重新渲染页面
          await this.getCompany()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        // 编辑部分
        // 弹框开启
        this.showDialog = true
        // 修改弹框上面的文字编辑
        this.idEdit = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-main{
  padding: 10px;
  background: #f5f6f8;
  .app-container{
    padding: 30px 140px;
    font-size: 14px;
    background: #fff;
    color: #606266;
    .spans {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
